{% extends 'mac_basic.html' %}
{% load static %}

{% block title %}
    生成MAC所有记录
{% endblock %}


{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css' %}" media="all">
    <link rel="stylesheet" href="{% static 'css/my_search.css' %}">
    <link rel="stylesheet" href="{% static 'css/bulk_delete.css' %}">
    <style>
        .download-details {
            padding: 50px 60px 0 50px;
        }
        .mac{
            padding-left: 50px;
            padding-bottom: 10px;
            border-bottom: 3px solid #8B8989;
        }
        .mac h3 {
            margin-top: 20px;
            margin-bottom: 10px;
        }
        .page {
            float: right;
            margin-right: 60px;
        }
        td,th {
            text-align: center;
        }
        .mac_record_nums {
            width: 114px;
            float: right;
            padding-top: 20px;
            padding-right: 10px;
        }
        .mac_count {
            float: right;
            padding-top: 28px;
            padding-right: 10px;
        }
        .mac_count span {
            font-weight: bold;
            color: #337ab7;
        }

    </style>
{% endblock %}


{% block content %}
    <div class="mac">
        <h3>MAC生成<small> 记录表</small></h3>
    </div>
    <div id="baidu_parent">
        {% include 'pub/bulk_delete.html' %}
        <form method="post" action="{% url 'download_details' %}">
            <div id="baidu">
                <div class="input">
                    <input type="text" name="search" placeholder="请输入关健词" id="search"/><span class="clear" id="cls">X</span>
                </div>
                <button>搜索</button>
            </div>
        </form>

    </div>

    <div class="table-responsive download-details">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>#</th>
              <th>产品名称</th>
              <th>生产计划编号</th>
              <th>生成时间</th>
              <th>型号</th>
              <th>MAC开始</th>
              <th>MAC结束</th>
              <th>数量</th>
              <th>生成者</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {% for obj in mac_record_obj %}
                <tr>
                  <th scope="row">
                      <span class="forloop">{{forloop.counter}}</span>
                      <div><input type="checkbox" style="display: none" class="input_checkbox" value="{{ obj.id }}"></div>
                  </th>
                  <td>{{ obj.product_name }}</td>
                  <td>{{ obj.hardware_name }}</td>
                  <td>{{ obj.generate_datetime|date:"Y-m-d H:i:s" }}</td>
                  <td>{{ obj.board }}</td>
                  <td>{{ obj.mac_start }}</td>
                  <td>{{ obj.mac_end }}</td>
                  <td>{{ obj.mac_nums }}</td>
                  <td>{{ obj.user_id.fullname }}</td>
                  <td><a href="{% url 'obtain_macs' obj.id_identification obj.generate_datetime|date:"Y-m-d" %}"
                         class="btn btn-success btn-xs"><i class="fa fa-download" aria-hidden="true"></i> 下载</a></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
    </div>

    <div class="page">
        <nav aria-label="Page navigation">
          <ul class="pagination">
            {{ pages | safe }}
          </ul>
        </nav>
    </div>
    <div class="mac_record_nums">
        <select id="mac_record_nums" name="mac_record_nums" class="form-control">
              <option value="5">每页5条</option>
              <option value="10">每页10条</option>
              <option value="15">每页15条</option>
              <option value="20">每页20条</option>
              <option value="25">每页25条</option>
              <option value="30">每页30条</option>
              <option value="40">每页40条</option>
        </select>
    </div>
    <div class="mac_count">
        总共 <span>{{ mac_count }}</span> 条MAC记录
    </div>
{% endblock %}


{% block js %}
    <script src="{% static 'js/bulk_delete.js' %}"></script>
    <script src="{% static 'plugins/layui/layui.js' %}" charset="utf-8"></script>
    <script>
        layui.use('layer', function () {
            var layer = layui.layer;
            $('.define_delete').click(function () {
                var list = []
                var $id_list = $('.input_checkbox:checked')
                $.each($id_list, function (index, item) {
                    list.push($(item).val())
                })
                $.ajax({
                    url: '{% url "bulk_delete" %}',
                    type: 'POST',
                    data: {'mac_details_id_list':list, 'url': "{% url 'download_details' %}"},
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            layer.msg('删除成功', {icon: 1, time: 2000}, function () {
                                window.location.replace("{% url 'download_details'%}");
                            })
                        }else {
                            console.log(layer);
                            layer.msg('请选择要删除项', {icon: 3, time:1500})
                        }
                    }
                })
            })
        })

    </script>
    <script>
        document.getElementById("search").addEventListener("keyup",function(){
            if(this.value.length>0)
            {
                document.getElementById("cls").style.visibility="visible";
                document.getElementById("cls").onclick=function()
                {
                    document.getElementById("search").value="";
                }
            }else
            {
                document.getElementById("cls").style.visibility="hidden";
            }
        });
    </script>
    <script>
        var page_size = "{{ page_size }}";
        var $option_list = $('#mac_record_nums option');
        $.each($option_list,function(i, Ele){
            if (page_size === Ele.getAttribute('value')) {
                Ele.setAttribute('selected','selected')
            }
        });
        $('#mac_record_nums').change(function () {
            window.location.replace("{% url 'download_details'%}"+"?"+"page_size="+$(this).find('option:selected').val());
        })
    </script>
{% endblock %}
